import platform = require('../../../platform/common/baseCommon');
import appClient = require('../../../platform/client/appClient');
import platformControls = require('../../../platform/client/controls');
import report = require('../../../platform/client/report');

let moduleName = "platform.test";

/**
 * 测试视图
 */
@platform.addon("测试视图", "测试视图", moduleName)
@appClient.template('<div></div>')
export class testView extends appClient.baseView {
    onAfterBind?() {
        syncRequire('./platform/client/controls');

        /** 获取器 */
        let fetcher = new report.dataServiceFetcher();
        fetcher.name = "fetcher_city_population";
        fetcher.command = "cmd_city_population";
        fetcher.dataService = new appClient.asyncFactory(platform.IDataService, "remoteCall", "example");
        let fetcherMap = new report.dataServiceFetcher();
        fetcherMap.name = "fetcher_map";
        fetcherMap.command = "cmd_dj_nsrxx";
        fetcherMap.dataService = new appClient.asyncFactory(platform.IDataService, "remoteCall", "example");
        let dataSourceMap = new platform.dataQuerySource();
        dataSourceMap.name = "data_map";
        dataSourceMap.fetcher = fetcherMap;

        let fetcherUser = new report.dataServiceFetcher();
        fetcherUser.dataService = new appClient.asyncFactory(platform.IDataService, "remoteCall", "webptDataService");
        fetcherUser.name = "fetcher_user_role";
        fetcherUser.command = "cmd_user_role";
        let dataSourceUser = new platform.dataQuerySource();
        dataSourceUser.name = "data_user_role";
        dataSourceUser.fetcher = fetcherUser;
        /** 数据源1 */
        let dataSource: platform.dataQuerySource = new platform.dataQuerySource();
        dataSource.name = "data_city_population";
        dataSource.fetcher = fetcher;
        dataSource.paramKeyList = { "name": "name", "district": "district" };

        /** 获取器 */
        let fetcher2 = new report.dataServiceFetcher();
        fetcher2.name = "fetcher_city_district";
        fetcher2.command = "cmd_city_district";
        fetcher2.dataService = new appClient.asyncFactory(platform.IDataService, "remoteCall", "example");
        /** 数据源2 */
        let dataSource2: platform.dataQuerySource = new platform.dataQuerySource();
        dataSource2.name = "data_city_district";
        dataSource2.fetcher = fetcher2;

        let editInfo: report.fieldEditInfo[] = [
            {
                $type: "platform.client.fieldEditInfo",
                name: "name",
                editControl: {
                    $type: "platform.client.fieldEditControl",
                    frontLabel: "国家",
                    placeHolder: "国家",
                    typeahead: true
                },
                dataSource: dataSource2
            },
            {
                $type: "platform.client.fieldEditInfo",
                name: "ID",
                editControl: {
                    $type: "platform.client.fieldEditControl",
                    frontLabel: "省份",
                    placeHolder: "省份",
                    typeahead: true
                },
                defaultData: ["Apple", "IPhone X", "Samsung", "Galaxy Note8"]
            }
        ];

        let dxkFieldEdit = new report.fieldEditInfo();
        dxkFieldEdit.name = "dxk"
        let dxkControl = new platformControls.selectEditControl();
        dxkControl.caption = "下拉框";
        dxkFieldEdit.defaultData = [{ name: "示例1", caption: "Demo1", id: 1 }, { name: "示例2", caption: "Demo2", id: 2 }, { name: "示例3", caption: "Demo3", id: 3 }];
        dxkControl.showField = "name";
        dxkControl.valueField = "id";
        dxkFieldEdit.editControl = dxkControl;

        let timeContoone = new platformControls.timeEditControl();
        timeContoone.caption = '时间控件';
        timeContoone.timeMinView = 2;
        let timeEditOne = new report.fieldEditInfo();
        timeEditOne.name = "time";
        timeEditOne.editControl = timeContoone;

        let radioEdit = new report.fieldEditInfo();
        radioEdit.name = "sex"
        let controlOne = new platformControls.radioEditControl();
        radioEdit.defaultData = [];
        radioEdit.defaultData.push({ 'name': '男', 'value': '男' });
        radioEdit.defaultData.push({ 'name': '女', 'value': '女' });

        controlOne.caption = '性别';
        controlOne.showField = "name";
        controlOne.valueField = "value";
        controlOne.groupName = "testRadio"

        radioEdit.editControl = controlOne;
        editInfo.push(dxkFieldEdit, timeEditOne, radioEdit);

        let paramReport: report.parameterControl = {
            $type: "platform.client.parameterControl",
            name: "parameters",
            fields: editInfo,
            caption: "参数输入",
            dataSourceNames: ["data_city_district", "data_map", dataSourceUser.name],
            dataViews: {
                view_param: {
                    $type: "platform.dataView"
                }
            },
            queryCount: 200
        }

        //折线图
        let echart = new report.echartBrokenlineDataDisplayer();
        echart.name = "echart";
        echart.caption = "人口数量";
        echart.style("height", 300);
        echart.xAxisField = 'Name';
        echart.yAxisField = [{ name: 'Population', index: 1 }, { name: 'ID', index: 0 }];
        echart.yAxis = [{
            type: 'value',
            name: '城市ID',
            position: 'right',
        }, {
            type: 'value',
            name: '人口',
            position: 'left'
        }];
        echart.dataViews = {};
        //配置数据视图
        let dataView = new platform.dataView();
        dataView.dataSourceName = "data_city_population";
        echart.dataViews["view_echart"] = dataView;

        // let dataView1 = new platform.dataView();
        // dataView1.dataSourceName = "data_city_district";
        // echart.dataViews["view_echart2"] = dataView;

        echart.options = {
            tooltip: {
                trigger: 'axis',
                show: true
            },
            legend: {
                data: ['人口']
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    "name": "人口",
                    "type": "line",
                    "data": []
                }
            ]
        };


        //饼图
        let piechart = new report.echartPieDataDisplayer();
        piechart.name = "piechart";
        piechart.caption = "人口数量";
        piechart.style("height", 300);
        piechart.pieFields = ['Population'];
        piechart.dataViews = {};
        let pieview = new platform.dataView();
        pieview.filterString = "row.District=='Guangdong' || row.District == 'Jiangsu'";
        pieview.dataSourceName = "data_city_population";
        piechart.dataViews["view_pie"] = pieview;
        piechart.options = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            title: [
                { text: "2015", x: '23%', y: '10%', textStyle: { fontSize: "12" } },
                { text: "2016", x: '48%', y: '10%', textStyle: { fontSize: "12" } },
                { text: "2017", x: '73%', y: '10%', textStyle: { fontSize: "12" } },
            ],

            series: [
                {
                    "name": "人口",
                    "type": "pie",
                    "radius": '60%',
                    "center": ['25%', '50%'],
                    "data": []
                },
                {
                    "name": "人口",
                    "type": "pie",
                    "radius": '60%',
                    "center": ['50%', '50%'],
                    "data": []
                },
                {
                    "name": "人口",
                    "type": "pie",
                    "radius": '60%',
                    "center": ['75%', '50%'],
                    "data": []
                },
            ]

        };

        // todo 测试dataTableDisplayer
        let tableReport = new report.gridDataDisplayer();
        tableReport.queryCount = 50;
        tableReport.name = "tableReport";
        tableReport.caption = "国家省份信息";
        tableReport.dataSourceNames = ["data_city_population"];
        tableReport.dataViews = {};
        let tableView = new platform.dataView();
        // tableView.dataSourceName = "data_city_district";
        tableView.dataSourceName = dataSourceUser.name;
        tableReport.dataViews["view_table"] = tableView;
        tableReport.columns = [{ $type: "platform.client.GridColumn", dataIndex: "USER_ID", header: "用户ID", hideable: true },
        { $type: "platform.client.TemplateColumn", dataIndex: "USER_NAME", header: "用户名", tpl: "账号：{0}" },
        { $type: "platform.client.GridColumn", dataIndex: "PASSWORD", header: "密码" },
        { $type: "platform.client.GridColumn", dataIndex: "ROLE_ID", header: "角色ID" },
        { $type: "platform.client.GridColumn", dataIndex: "ROLE_NAME", header: "角色名称" }];

        // 地图
        let mapReport = new report.echartScatterMapDataDisplayer();
        mapReport.name = "mapReport";
        mapReport.caption = "地图";
        mapReport.dataViews = {};
        let mapView = new platform.dataView();
        mapView.dataSourceName = "data_map";
        mapReport.dataViews["view_map"] = mapView;
        mapReport.longitudeField = "longitude";
        mapReport.latitudeField = "latitude";
        mapReport.nameField = "nsrmc";


        tableReport.customToolBox = new report.toolBoxControl();
        tableReport.customToolBox.tools = [new report.zoominToolControl()];

        piechart.customToolBox = new report.toolBoxControl();
        piechart.customToolBox.tools = [new report.zoominToolControl()];

        //配置明细表显示器
        let detailed = new report.detailedDataDisplayer();
        detailed.name = 'detailedReport';
        detailed.caption = '明细表测试';
        detailed.dataViews = {};
        let detailedTableView = new platform.dataView();
        detailedTableView.dataSourceName = "data_city_district";
        detailed.dataViews["view_table"] = detailedTableView;

        //明细表的数据源
        // dataSource.name = "data_city_population";
        // dataSource.fetcher = fetcher;




        let smartReport = new report.smartReport();
        smartReport.caption = "人口状况分析";
        smartReport.dataSources = {};
        smartReport.dataSources[dataSource.name] = dataSource;
        smartReport.dataSources[dataSource2.name] = dataSource2;
        smartReport.dataSources[dataSourceMap.name] = dataSourceMap;
        smartReport.dataSources[dataSourceUser.name] = dataSourceUser;
        smartReport.layoutPanel = new platformControls.layoutPanel("project/test/config/client/smartReportApp/layout/layout.html");
        smartReport.modules = {};
        echart.groupName = "group_population";
        piechart.groupName = "group_population";
        detailed.groupName = "group_population";
        mapReport.groupName = "group_population";
        smartReport.modules[paramReport.name] = paramReport;
        smartReport.modules[tableReport.name] = tableReport;
        smartReport.modules[echart.name] = echart;
        smartReport.modules[piechart.name] = piechart;
        smartReport.modules[detailed.name] = detailed;
        smartReport.modules[mapReport.name] = mapReport;
        smartReport.autoQuery = true;
        platform.fetchAddonProtoType(smartReport);
        smartReport.appendTo(this.element);
    }
}